<template>
<!--  <div id="map-container" ref="mapContainer" class="gep-map-container"></div>-->
  <div ref="mapContainer" class="gep-map-container"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave">
  </div>
</template>

<script setup>
import {ref,reactive, watch, onMounted} from 'vue';
import * as echarts from 'echarts';
import "echarts-gl";
import yanshan from '@/assets/json/map/361124_18.json';
import {useGepDataStore} from "@/stores/gep";
import {storeToRefs} from "pinia";
// import {getGepResults} from "api/services/gepService.ts";
import {getHomepageMapData} from "api/services/homepageService";

const maps = {
  'yanshan': yanshan
};

let myChart = ref(null);
let timeTicket = null; // 定时器引用
let count1 = 0; // 轮播计数器


const allData = reactive([
  { name: '河口镇', value: 396 },
])

const mapContainer = ref(null);
const gepDataStore = useGepDataStore();
const {
  count,
  isSubmitted
} = storeToRefs(gepDataStore);

watch(count, () => {
  updataLableData()
})

const year = 2024;

async function updataLableData() {
  const district = '铅山县';
  const gepMapLabelData = await getHomepageMapData(year, district);
  // const gepMapLabelData = await getGepResults()

  console.log("allData初始", allData);
  // 清空并更新
  allData.length = 0
  console.log("allData清空", allData);
  gepMapLabelData.bar01 .forEach(item => {
    allData.push({name: item.name, value: item.value})
  })
  console.log("allData更新", allData);

  // updateChart(); // ✅ 刷新图表
  return allData
}

// 延迟加载地图图表
onMounted(async () => {
  await updataLableData(); // 等待数据加载完成
  console.log("地图的数据如下allData", allData);

  setTimeout(() => {
    chartInit(allData);     // 初始化图表
    updateChart();          // 再更新图表数据

  }, 200);
});

function chartInit(mapData) {
  const container = mapContainer.value;

  if (!container) {
    console.error('地图容器未找到');
    return;
  }
  myChart = echarts.init(mapContainer.value);
  console.log("chartInit-地图的数据如下allData",mapData)
  echarts.registerMap('yanshan', yanshan);

  myChart.setOption(getOption('yanshan',mapData));
  // 启动自动轮播
  // startAutoTooltip(mapData.length);
}

function getOption(mapName,mapData, zoomValue = 1.0) {
  return {
    // 图表背景颜色
    // backgroundColor: '#010d3a',

    // 地图组件配置
    geo: {
      // 指定使用的地图类型
      map: mapName,
      // 当前视角的缩放比例，1.0 为默认缩放
      zoom: zoomValue,
      // 地图的纵横比，调整地图的显示比例
      aspectScale: 0.85,
      // 地图中心的坐标，'50%' 表示居中
      layoutCenter: ['50%', '50%'],
      // 地图的大小
      layoutSize: '100%',
      // 是否允许缩放和平移地图
      roam: false,
      rotate: 90, // 添加这一行，表示顺时针旋转 90 度
      // 地图区域的样式
      itemStyle: {
        // 默认状态下的边框颜色
        borderColor: 'rgb(220,215,215)',
        // 默认状态下的边框宽度
        borderWidth: 1,
        // 默认状态下的阴影颜色
        shadowColor: 'rgb(25,75,80)',
        // 默认状态下的阴影偏移X值
        shadowOffsetX: 0,
        // 默认状态下的阴影偏移Y值
        shadowOffsetY: 15,
        // 默认状态下的阴影模糊度
        shadowBlur: 10,
      },
      emphasis: {
        // 高亮状态下的区域颜色
        // areaColor: '#7a253c',
        // 高亮状态下的边框宽度
        borderWidth: 0,
      },
    },

    // 提示框配置
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: (params) => {
        const value = params.data?.value || 0;

        // 格式化金额
        const formattedValue = value >= 10000 ? `${(value / 10000).toFixed(2)}亿` : value;

        return `
          <div style="padding: 10px 15px; background: rgba(0, 50, 80, 0.9); border-radius: 6px; box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);">
            <div style="font-size: 14px; color: #ffffff; font-weight: bold; margin-bottom: 8px;">${params.name}</div>
            <div style="font-size: 16px; color: #00eaff;">生态产品价值：<span style="color: #fff;font-weight:bold;">${formattedValue}</span> ${value >= 10000 ? '亿元' : '万元'}</div>
          </div>
        `;
      },
      backgroundColor: 'rgba(0, 50, 80, 0.9)',
      borderColor: 'rgba(0, 255, 255, 0.5)',
      enterable: true,
      transitionDuration: 1,
      textStyle: {
        color: '#ffffff'
      }
    },


    // 系列配置
    series: [
      {
        // 系列名称
        name: 'Map',
        // 系列类型
        type: 'map',
        // 使用的地图类型
        map: mapName,
        // 选中模式，'false' 表示不允许选择多个区域
        selectedMode: 'false',
        // 纵横比
        aspectScale: 0.85,
        // 地图中心的坐标
        layoutCenter: ['50%', '50%'],
        // 地图的大小
        layoutSize: '100%',
        // 是否允许缩放和平移地图
        roam: false,
        // 当前视角的缩放比例
        zoom: zoomValue,
        // 滚轮缩放的极限控制
        scaleLimit: {
          min: 1,
          max: 2,
        },
        label: {
          show: true,
          color: '#fff',
          // 标签文本字体大小
          fontSize: 16,
          fontWeight: 'bold',
        },
        // 区域的样式
        itemStyle: {
          // 默认状态下的区域颜色
          areaColor: 'rgb(25,75,80)',
          // 默认状态下的边框颜色
          borderColor: '#FFFFFF',
        },
        emphasis: {

          // 高亮状态下的标签样式
          label: {
            show: true,
            // 标签文本颜色
            color: '#fff',
            // 标签文本字体大小
            fontSize: 24,
            fontWeight: 'bold',

          },
          itemStyle: {
            // 高亮状态下的边框颜色
            borderColor: '#FFF',
            // 高亮状态下的边框宽度
            borderWidth: '2',
            // 高亮状态下的阴影颜色
            shadowColor: 'rgba(255, 255, 255, 0.5)',
            // 高亮状态下的阴影模糊度
            shadowBlur: 5,
            // 高亮状态下的区域颜色渐变
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 2,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgb(58,218,191)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0, 38, 66, 0.1)', // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },

        },

        // 数据
        data: mapData,
      },
    ],
  };
}


// 启动自动轮播提示框
function startAutoTooltip(dataLength) {
  console.log("startAutoTooltip-数据长度为",dataLength)
  // 先清除已存在的定时器
  if (timeTicket) {
    clearInterval(timeTicket);
  }

  // 只有在有数据的情况下才启动轮播
  if (dataLength > 0) {
    timeTicket = setInterval(function() {
      if (myChart) {
        // 取消高亮之前的数据项
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: (count1 - 1) % dataLength
        });

        // 高亮当前数据项
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: count1 % dataLength
        });

        // 显示当前数据项的提示框
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: count1 % dataLength
        });

        count1++;
      }
    }, 2000); // 每3秒切换一次
  }
}

// 停止自动轮播
function stopAutoTooltip() {
  if (timeTicket) {
    clearInterval(timeTicket);
    timeTicket = null;
  }

  // 隐藏所有提示框并取消高亮
  if (myChart) {
    myChart.dispatchAction({ type: 'hideTip' });
    // 取消所有高亮
    for (let i = 0; i < allData.length; i++) {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: i
      });
    }
  }
}

function updateChart() {
  // 避免重复初始化
  if (myChart) {
    console.log("updateChart-地图的myChart",myChart)
    myChart.dispose(); // 先销毁旧实例
  }
  myChart = echarts.init(mapContainer.value);
  if (myChart) {
    // console.log("chartInit-地图的数据如下allData",mapData)
    echarts.registerMap('yanshan', yanshan);
    myChart.setOption(getOption('yanshan',allData), true);
    // 重启自动轮播
    // startAutoTooltip(allData.length);
  }
}

// 监听鼠标进入和离开事件，暂停和恢复自动轮播
// function handleMouseEnter() {
//   console.log("handleMouseEnter-鼠标进入地图")
//   stopAutoTooltip();
// }
//
// function handleMouseLeave() {
//   console.log("handleMouseLeave-鼠标离开地图")
//   startAutoTooltip(allData.length);
// }

</script>

<style scoped>
.gep-map-container {
  width: 100%;
  height: 100%;
}
</style>
